/*
  学习目标：React创建元素-练习-JSX初体验
  jsx: 
    1. 本质上: 是createElement的语法糖, 作用一模一样, 语法更加简介
    2. 允许在js文件中写html语法
    3. React项目脚手架内置了babel配置, 可以直接使用 
*/
import React from 'react'
import ReactDOM from 'react-dom'




const liNode1 =  React.createElement("li", null, "香蕉")
const liNode2 =  React.createElement("li", null, "橘子")
const liNode3 =  React.createElement("li", null, "苹果")
const ulNode1 = React.createElement("ul", {className: "list"},liNode1, liNode2, liNode3)

const ulNode2 = <ul className='list'>
  <li>香蕉</li>
  <li>橘子</li>
  <li>苹果</li>
</ul>


console.log('ulNode1, ulNode2  ----->  ', ulNode1, ulNode2);

ReactDOM.render(ulNode2, document.getElementById("root"))